<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>更换头像</span>
  </div>
  <div>
    <!-- 图片，用来展示用户选择头像 -->
    <img v-if="!this.avatar" class="the_img"  src="../../assets/images/avatar.jpg" alt="" />
    <img v-else class="the_img" :src="this.avatar" alt="" />
    <!-- 按钮区域 -->
    <div class="btn-box">
      <!-- js原生文件上传功能，触发点击事件出现上传头像弹窗 -->
      <input type="file" accept="image/*" style="display:none" ref="iptRef" @change="onFileChange" />
      <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
      <el-button type="success" icon="el-icon-upload" :disabled="avatar === ''" @click="uploadFn">上传头像</el-button>
    </div>
  </div>
</el-card>
</template>

<script>
  import {updateAvatarAPI} from '@/api'

export default {
    name:'UserAvatar',
    data() {
        return {
            avatar:''
        }
    },
    methods:{
      //选择图片触发点击事件
      chooseImg(){
        //this.$refs拿到的是DOM，因为<input />是原生属性
        //为了让input[type=file]标签，让他再用JS方式来触发代码
        //原因input[type=file]是原生标签，样式不太好改
        //移花接木
        this.$refs.iptRef.click()
      },
      //在选择框中选择触发的改变事件
      onFileChange(e){
        //获取用户选择的文件列表（伪数组）
        const files = e.target.files
        console.log(e);
        if(files.length === 0){
          //没有图片
          this.avatar = ''
        }else{
          //选择图片
          //选择图片文件，要给img标签上做纯前端预览
          //1，只能是图片的“链接地址”
          //2，图片的base64字符串
          // console.log(files[0]);
          //解决方法一使用URL.cteateObjectURL方法，文件转成内存地址(这个地址只能在js内存里，不能发送给后台)
          //返回值：临时内存地址
          // this.avatar = URL.createObjectURL(files[0])

          //解决方法2 使用FileReader来读取选择的前端文件，转换为base64字符串，给img渲染
          //1.创建FileReader对象
          const fr = new FileReader()
          //2.调用readAsDataURL函数，读取文件内容
          fr.readAsDataURL(files[0])
          //3.监听fr的onload事件
          fr.onload = async e =>{
            //4.通过e.target.result获取读取的结果，值是base64位字符串
            this.avatar = e.target.result
            // //5.调用接口传给后台，返回结果提示
            // const {data:res} = await updateAvatarAPI(this.avatar)
            // console.log(res);
            // if(res.code !== 0) return this.$message.error('上传头像失败！')
            // this.$message.success('上传头像成功！')
            // this.$store.dispatch('initUserInfo')
          }


        }
      },
       //5.调用接口传给后台，返回结果提示
     async uploadFn(){
        const res = await updateAvatarAPI(this.avatar)
        if(res.data.code !== 0) return this.$message.error('上传头像失败')
        this.$message.success('上传头像成功')
        this.$store.dispatch('initUserInfo')
      }
    }
}
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
}
.the_img{
    width: 300px;
    height: 400px;
}
</style>